---
title: 解释你对盒子模型的理解，以及你将如何在 CSS 中告诉浏览器以不同的盒子模型渲染你的布局。
---

CSS 盒子模型描述了为文档树中的元素生成的矩形框，并根据视觉格式化模型进行布局。每个框都有一个内容区域（例如文本、图像等）和可选的周围 `padding`、`border` 和 `margin` 区域。

CSS 盒子模型负责计算：

* 块级元素占据多少空间。
* 边框和/或边距是否重叠或折叠。
* 盒子的尺寸。

## 盒子模型规则

* 块级元素的尺寸由 `width`、`height`、`padding` 和 `border` 计算。
* 如果未指定 `height`，则块级元素的高度将与其包含的内容一样高，再加上 `padding`（除非有浮动，对于浮动，请参阅 [描述浮动及其工作原理](/questions/quiz/describe-floats-and-how-they-work)）。
* 如果未指定 `width`，则非 `float`-ed 块级元素将扩展以适合其父元素的宽度减去 `padding`，除非它设置了 `max-width` 属性，在这种情况下，它将不超过指定的最大宽度。
  * 某些块级元素（例如 `table`、`figure` 和 `input`）具有固有的或默认的宽度值，并且可能不会扩展以填充其父容器的整个宽度。
  * 注意：`span` 是一个内联级元素，没有默认宽度，因此它不会扩展以适应。
* 元素的 `height` 由内容的 `height` 计算。
* 元素的 `width` 由内容的 `width` 计算。
* 默认情况下 (`box-sizing: content-box`)，`padding` 和 `border` 不属于元素的 `width` 和 `height`。

请注意，`margin` 不计入盒子的实际大小。它会影响盒子在页面上占用的总空间，但仅限于盒子外部的空间。盒子的区域在 `border` 处停止——它不会延伸到 `margin` 中。

## 额外

查找 `box-sizing` 属性，该属性会影响元素的总高度和宽度的计算方式。

* `box-sizing: content-box`: 这是 `box-sizing` 的默认值，遵循上述规则。

  例如：

  ```css
  .example {
    box-sizing: content-box;
    width: 100px;
    padding: 10px;
    border: 5px solid black;
  }
  ```

  `.example` 元素实际占用的空间将是 130px 宽（100px 宽度 + 10px 左内边距 + 10px 右内边距 + 5px 左边框 + 5px 右边框）。

* `box-sizing: border-box`: `width` 和 `height` 将包括内容、内边距和边框（但不包括外边距）。这是一种更直观的思考盒子模型的方式，因此许多 CSS 框架（例如 Bootstrap、Tailwind、Bulma）全局设置 `* { box-sizing: border-box; }`，以便所有元素默认使用这种盒子模型。有关更多信息，请参阅[关于 `box-sizing: border-box` 的问题](/questions/quiz/what-does-box-sizing-border-box-do-what-are-its-advantages)。

  例如：

  ```css
  .example {
    box-sizing: border-box;
    width: 100px;
    padding: 10px;
    border: 5px solid black;
  }
  ```

  该元素在页面上仍将占用 100px，但内容区域将为 70px 宽（100px - 10px 左内边距 - 10px 右内边距 - 5px 左边框 - 5px 右边框）。

### 边框和外边距行为

* **边框不会与相邻元素的边框折叠或重叠**。每个元素的边框单独渲染。
* **外边距可以折叠**，但仅垂直方向，且仅在块级元素之间。水平外边距不会折叠。这意味着如果一个块级元素具有底部外边距，而下一个块级元素具有顶部外边距，则仅使用两者中较大的一个。此行为与 `box-sizing` 无关，并且是 CSS 中的默认行为。

## 参考

* [盒子模型 | MDN](https://developer.mozilla.org/zh-CN/docs/Learn/CSS/Building_blocks/The_box_model#the_standard_css_box_model)
